// 排序
.m-archive-order {
    .fz(12px);
    margin-bottom: 10px;
    padding-bottom: 5px;
    .clearfix;
    // background-color:@bg-light;
    border-bottom: 1px solid #eee;

    .u-publish {
        .fl;
    }

    .u-label{
        .none;
    }
    .u-filter {
        .fl;
    }
    .u-modes {
        .fr;
    }
    .u-modes,
    .u-filter {
        padding: (34px - 19px)/2 0;
        color: #666;
    }
    .u-mode {
        .ml(20px);
        .pointer;
        i {
            .mr(2px);
        }
        &.on {
            color: @primary;
        }
        &:hover {
            color: @pink;
        }
    }
    .u-toggle {
        .pa;
        .rt(0);
        padding: 6px 10px;
        .pointer;

        .el-icon-arrow-up {
            .none;
        }

        &.on {
            .el-icon-arrow-down {
                .none;
            }
            .el-icon-arrow-up {
                .db;
            }
        }
    }
}
@media screen and (max-width: @ipad) {
    .m-archive-order {

        .u-publish {
            .mr(10px);
        }
        .u-filter{
            .w(110px);
        }
        .u-modes{
            .w(140px);
        }
        .u-filter,.u-modes {
            .pr;
            background-color: @bg-light;
            border: 1px solid #ddd;
            .r(4px);
            user-select: none;
            padding:6px 0;

            &.on{
                .u-options{
                    .db;
                }

                border-bottom-left-radius:0;
                border-bottom-right-radius:0;
            }
        }
        .u-label{
            padding:0 10px;
            .pointer;
            .db;
        }
        .u-options {
            .pa;
            .lt(-1px,29px);
            padding: 5px 0;
            .w(100%);
            background-color:#fff;
            border: 1px solid #ddd;
            .z(2);
            .u-mode {
                .db;
                padding: 7px 10px;
                .pr;
                .ml(0);
            }
            .none;
        }
    }
}
@media screen and (max-width:@phone){
    .m-archive-order {
        .none;
        .u-publish {.none;}
    }
}

// 列表搜索
.m-archive-search{
    .mb(10px);
    .el-select .el-input {
        width: 80px;
    }
    .u-switch{
        .el-switch__label{
            .bold;
            color:#666;
        }
    }
}


// 列表
.m-archive-list {
    .mt(20px);
    .u-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .u-item {
        border-bottom: 1px solid @border-hr;
        padding-bottom: 20px;
        .mb(20px);
        .clearfix;
        .pr;
    }

    // 海报
    .u-banner {
        .fl;
        .mr(10px);
        .w(180px);
        .h(100px);
        overflow: hidden;
        .db;
        .pr;
        .z(1);
        border: 1px solid #eee;
        padding: 5px;
        box-sizing: border-box;
        img {
            .size(100%);
            filter: saturate(120%);
            transition: 0.06s all ease-in-out;
        }
        transition: 0.06s border ease-in-out;
        &:hover {
            img {
                filter: saturate(140%) brightness(120%);
            }
            border-color: @border;
        }
    }

    // 标题
    .u-post {
        margin: 0;
        padding: 0;
        .nobreak;
        .mb(5px);
        .u-icon {
            .size(16px);
            .y(-3px);
            .mr(5px);
        }
        &.isSticky {
            .u-title::before {
                content: "🎯";
                .mr(5px);
            }
            .u-title:hover{
                box-shadow: 0 1px 0 #f00;
            }
        }
        .u-title {
            // color:@darkblue;
            font-weight:400;
            &:hover {
                box-shadow: 0 1px 0 @primary;
            }
        }
        .fz(15px, 2);
        font-weight: normal;
        .lh(2);
        font-weight: 400;
    }

    // 角标
    .u-marks {
    }
    .u-mark {
        font-style: normal;
        font-size: 12px;
        padding: 1px 5px 2px 5px;
        margin-left: 5px;
        border-radius: 2px;
        background-color: #6f42c1;
        color: #fff;
        .ml(5px);
    }

    // 内容
    .u-content {
        .db;
        padding-left: 20px;
        .pr;
    }

    // 内容·描述类
    .u-desc {
        .db;
        .fz(12px, 1.8);
        color: #555;
        .break(2);
        .mb(6px);
        padding: 0 2px;
        white-space: pre-wrap;
    }

    // 内容·meta列表
    .u-metalist {
        .nobreak;
        .db;
        .fz(12px, 25px);
        .mb(4px);
        strong {
            .dbi;
            .y(top);
            padding: 0 10px;
            .mr(10px);
            .r(4px);
            background-color: #f1f8ff;
            color: @color-link;
            font-weight: normal;
        }
        em {
            font-style: normal;
        }
        b {
            font-weight: normal;
        }
        a {
            color: #333;
            &:hover {
                color: @color-link;
                box-shadow: 0 1px 0 @color-link;
            }
        }
    }
    .u-tag {
        .db;
        .nobreak;
        a,
        b {
            padding: 0.2em 0.8em;
            margin: 0 0.5em 0 0;
            background-color: #f1f8ff;
            border-radius: 3px;
            .fz(12px);
            color: #4989d2;
        }
        a:hover {
            background-color: #def;
        }
    }
    .u-types {
        .db;
        .nobreak;
        b {
            padding: 0.1em 0.8em;
            margin: 0 0.5em 0.5em 0;
            border-radius: 3px;
            .fz(12px);
            .dbi;
            .y(top);
        }
    }

    // 底部
    .u-misc {
        .db;
        .pa;
        .rb(10px, 24px);
        .x(right);
        .fz(12px, 20px);
        color: #777;
    }

    .u-author{
        // .pa;.rt(0);
    }
    .u-author-avatar {
        .size(24px);
        .y;
        .r(2px);
        .mr(5px);
        // .fr;
        // .ml(5px);
    }
    .u-author-name {
        .fz(12px,24px);
        // .fl;
        color:#666;
        &:hover {
            color:@pink;
        }
    }
    .u-date {
        .db;
        .mt(3px);
        .clear;
    }

    .u-down {
        // .u-btn-white;
        i {
            .size(12px);
            .y(-1px);
        }
    }
    .u-pipe {
        margin: 0 5px;
        color: #999;
    }
}
@media screen and (max-width: @ipad) {
    .m-archive-list {
        .u-banner {
            .w(100px);
            .h(55px);
            padding: 3px;
            .fr;
            margin-left: 10px;
            margin-right: 0;
        }

        .u-post {
            white-space: normal;
            word-break: break-all;
            .break(2);
            .fz(14px, 22px);
        }

        .u-metalist,
        .u-down,
        .u-view {
            .none;
        }
        .u-tag {
            .mb(8px);
        }

        .u-misc {
            .ps;
            .x(left);
        }
        .u-author-name {
            color: #555;
        }
    }
}

// 为空
.m-archive-null {
    margin-top: 10px;
}

// 加载更多
.m-archive-more {
    .mb(10px);
    .w(100%);
    .none;
}
.m-archive-more.show {
    .db;
}

// 分页
.m-archive-pages {
    overflow-x: auto;
}
